<!DOCTYPE html>
<html>
<head>
	<title>JQ插件</title>
	<style type="text/css">
	*{margin: 0;padding: 0}
	li{list-style: none;}
	#adv{
		width: 1000px;
		margin: 100px auto;
		position: relative;
	}
	#adv .adv-prev{
		position: absolute;
		left: 20px;
		top: 45%
	}
	#adv .adv-next{
		position: absolute;
		right: 20px;
		top: 45%
	}


	
	</style>
</head>
<body>
	<div id="adv">
		<ul>
			<li><img src="jqlunbotu/1.jpg"></li>
			<li><img src="jqlunbotu/2.jpg"></li>
			<li><img src="jqlunbotu/3.jpg"></li>
			<li><img src="jqlunbotu/4.jpg"></li>
			<li><img src="jqlunbotu/5.jpg"></li>
		</ul>
		<img src="jqlunbotu/l.png" class="adv-prev">
		<img src="jqlunbotu/r.png" class="adv-next">
	</div>






<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
		$.fn.extend({
			slide:function(az){
				
				//dotclick  boolean 小圆点是否点击
				az.dotclick = (az.dotclick === undefined) ? true : az.dotclick
				//dotbackgroundcolorY  string  当前显示页小圆点背景色
				az.dotbackgroundcolorY = az.dotbackgroundcolorY || "#fff"
				//dotwhether  boolean  小圆点是否存在
				az.dotwhether = (az.dotwhether === undefined) ? true : az.dotwhether
				//dotbackgroundcolorN  string  当前未显示页小圆点背景色
				az.dotbackgroundcolorN = az.dotbackgroundcolorN  || "orange"
				//crossingclick  boolean  是否返回到开头或结尾
				az.crossingclick = (az.crossingclick === undefined) ? true : az.crossingclick
				//method  string  fade(渐隐渐显)  || move(滑动)
				az.method = az.method ||"fade"
				//autoplay   boolean   自动播放选择
				az.autoplay = az.autoplay || false
				//autotime  number 循环播放时间间隔
				az.autotime = az.autotime || 1000
				//keyboard boolean 判断是否可通过按键控制
				az.keyboard = (az.keyboard === undefined) ? true : az.keyboard 

				function changeDI(){
					if(az.method == "fade"){
						liul.hide().eq(n).fadeIn()
					}
					if(az.method == "move"){
						wide.find("ul").eq(0).animate({
							marginLeft:-(n * wide.width())
						})
					}
					dotlist.css({
						backgroundColor:az.dotbackgroundcolorY
					})
					dotlist.eq(n).css({
						backgroundColor:az.dotbackgroundcolorN
					})
				}


				var wide = this
				var liul = this.find("li")
				var prev = this.find(".adv-prev")
				var next = this.find(".adv-next")
				var extend = liul.length
			
				
				//初始化样式
				//图片除第一张全部隐藏
				if(az.method == "fade"){
					liul.hide();
					liul.eq(0).show();
				}
				if(az.method == "move"){	
					this.find("ul").eq(0).css({
							width: extend * this.width(),
					})
					liul.css({
						float:"left",
					})
					this.css({
						overflow:"hidden",
					})
				}
				if(az.dotwhether){
					var dotul = $("<div class='dotul'></div>")
					
					dotul.css({
						position: "absolute",
						left: "45%",
						bottom: 20,
					})
					//初始化小圆点
					for(var i = 0; i < extend ; i++){
						dotul.appendTo(this)
						var dot = $("<span></span>")
						dot.css({
							width: 10,
							height: 10,
							float: "left",
							borderRadius: "50%",
							backgroundColor:az.dotbackgroundcolorY,
							marginRight: 10,
							display: "block",
						})
						dot.appendTo(dotul)
					}


					var dotlist = this.find(".dotul span")
					dotlist.eq(0).css({
						backgroundColor:az.dotbackgroundcolorN
					})
					

					//小圆点的单击事件
					if(az.dotclick){
						dotlist.click(function(){
							n = $(this).index();
							changeDI()
						})
						dotlist.css({
							cursor:"pointer"
						})
					}
				}

				//当前显示
				var n = 0;
				//下一张点击事件
				next.click(function(){
					if(n < extend-1){
						n++;	
					}
					else{
						//是否返回到开头
						if(az.crossingclick){
							n=0;
						}
						else{
							return;
						}	
					}
					changeDI()
				})

				//上一张点击事件
				prev.click(function(){
					if(n > 0){
						n--;	
					}
					else{
						//是否返回到结尾
						if(az.crossingclick){
							n = extend-1;
						}
						else{
							return;
						}
					}
					changeDI()
				})
				//判断是否自动播放
				if(az.autoplay){
					var t = setInterval(function(){
						next.click()
					},az.autotime)
					this.mouseenter(function(){
						clearInterval(t)
					})
					this.mouseleave(function(){
						t = setInterval(function(){
							next.click()
						},az.autotime)
					})
				}

				//判断是否可通过按键控制
				if(az.keyboard){
					$(window).keyup(function(e){
						if(e.keyCode ==37){
							prev.click()
						}
						if(e.keyCode ==39){
							next.click()
						}
					})
				}
			}
		})

		$("#adv").slide({
			method:"move",
			keyboard:"true"
		})
		
	
</script>
</body>
</html>